<template>
  <div class="com-container">
    <div class="com-chart" ref="pie_ref">
    </div>
  </div>
</template>

<script>
import staInfo from "../api/staInfo";

export default {
  name: "Pie",
  data() {
    return {
      chartInstance: null,
      allDate: null,  //服务器返回的数据

    }
  },
  mounted() {
    this.initCharts()
    this.getData()
  },
  methods: {
    initCharts() {
      this.chartInstance = this.$echarts.init(this.$refs.pie_ref)

      //对图表初始化配置的控制
      const initOption = {
        title: {
          text: '订单情况',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },

      }
      this.chartInstance.setOption(initOption)

    },
    async getData() {
      let vuethis = this
      await staInfo.getPieCount()
        .then(response => {
          this.allDate = response.data.list
          const dataOption = {
            series: [
              {
                name: '订单情况',
                type: 'pie',
                radius: '50%',
                data: [
                  {
                  value:vuethis.allDate[0].value,
                    name:vuethis.allDate[0].name
                  },{
                  value:vuethis.allDate[1].value,
                    name:vuethis.allDate[1].name
                  },{
                  value:vuethis.allDate[2].value,
                    name:vuethis.allDate[2].name
                  },
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]


          }
          this.chartInstance.setOption(dataOption)
        })
    }

  }
}
</script>

<style scoped>
.com-container {
  width: 1000px;
  height: 800px;
}

.com-chart {
  width: 100%;
  height: 100%;
  /*overflow: hidden;*/
}
</style>




